<template>
  <div class="card" style="min-height: 80vh">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-center">
        <h4 class="font-weight-bold m-0">市场行情</h4>
        <el-tag type="warning">
          <i class="fa fa fa-exclamation-triangle"></i>
          &nbsp;
          <span>市场行情所查询的价格信息均来源于互联网，仅供参考。</span>
        </el-tag>
      </div>

      <p class="text-muted">
        现有市场行情数据共计
        <span class="text-warning">{{ totalCount }}</span>
        条。
      </p>

      <div class="d-flex justify-content-between align-items-center mb-3">
        <select-product-cate
          filterable
          v-model="productCode"
          placeholder="请选择或查询产品"
          popper-class="el-cascader-long"
          style="min-width: 368px"
        ></select-product-cate>
        <div class="d-flex align-items-center">
          <small>时间：</small>
          <span
            v-for="(value, key) in enumProductDim"
            :key="key"
            class="badge badge-pill badge-light cursor-pointer mx-1"
            :class="key === marketProductDim ? 'badge-primary text-white' : 'badge-light'"
            @click="marketProductDim = key"
          >
            {{ value }}
          </span>
        </div>
      </div>

      <chart-market-average
        v-if="productCode"
        ref="chartRef"
        :category-code="productCode"
        :show-chart="marketProductDim"
      ></chart-market-average>
      <p v-else class="p-5 text-center text-muted bg-light">请先选择产品</p>
    </div>
  </div>
</template>
<script>
import SelectProductCate from '@/credit/components/select/SelectProductCate'
import ChartMarketAverage from '@/credit/components/chart/ChartMarketAverage'

export default {
  components: {
    SelectProductCate,
    ChartMarketAverage,
  },
  props: {},
  data() {
    return {
      addressCode: '',
      totalCount: 0,
      productCode: '100604005000',
      marketProductDim: 'day',
      enumProductDim: {
        day: '近30天',
        month: '近12个月',
        quarter: '近4个季度',
        year: '近7年',
      },
    }
  },
  computed: {
    org() {
      return this.$store.getters.org
    },
  },
  watch: {},
  created() {
    this.getAddressCode()
    this.getTotalCount()
  },
  mounted() {},
  methods: {
    async getTotalCount() {
      const [res] = await this.$utils.promise(
        this.$api.getData('industrial_db', 'market_category_total')
      )
      this.totalCount = (res && res.data && res.data.length && res.data[0].total_count) || 0
    },
    getAddressCode() {
      let code = this.org.address_code
      code = Number.parseInt(code)
      code = isNaN(code) ? 0 : code
      if (!code) {
        return false
      }

      const city = Math.floor(code / Math.pow(10, 8))
      if (city % 100 > 0) {
        this.addressCode = `${city}${Array(8).join('0')}`
      }
    },
    resize() {
      this.$nextTick(() => {
        const { chartRef } = this.$refs
        chartRef && chartRef.resize()
      })
    },
  },
}
</script>
<style scoped></style>
